
<template>
  <div class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
    <a-steps v-show="(vdata.showStyle == showStyleEnum.step) && !isMobile" :current="vdata.currentStep - 1" type="navigation">
      <a-step title="主体信息" />
      <a-step title="经营信息" />
      <a-step title="结算账户" />
      <a-step title="费率配置" />
      <a-step title="补充资料" />
    </a-steps>
    <a-divider v-show="!isMobile" />
    <a-divider v-show="isMobile" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;"><span style="color: #2980FD;">{{ vdata.currentStep }}</span>/{{ vdata.steps.length }} {{ vdata.steps[vdata.currentStep - 1] }}</a-divider>
    <!-- 1. 基础信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 1"
      ref="stepForm1Ref"
      style="margin-top: 20px;"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step1Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">主体信息</a-divider>

      <a-form-item label="选择商户类型" name="merchantType">
        <a-radio-group v-model:value="applymentDetailInfo.merchantType" @change="changeMerchantType">
          <a-radio :value="1">小微商户</a-radio>
          <a-radio :value="2">个体工商户</a-radio>
          <a-radio :value="3">企业</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="选择证件类型" name="licenseType">
        <a-radio-group v-model:value="applymentDetailInfo.licenseType">
          <a-radio v-for="(item, key) in vdata.licenseTypeList" :key="key" :value="item.value">{{ item.name }}</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.licenseType != 'A'" label="营业执照照片" name="licenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.licenseImg" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 营业执照编号)</span>
      </a-form-item>

      <a-form-item label="商户名称全称" name="mchFullName">
        <a-input v-model:value.trim="applymentDetailInfo.mchFullName" />
        <span v-if="applymentDetailInfo.merchantType == 1" class="jeepay-tip-text">小微商户，请命名为 商户 xxx。</span>
        <span v-else class="jeepay-tip-text">需与营业执照一致，如遇提示重复，请在后面加数字1、2...</span>
      </a-form-item>

      <template v-if="applymentDetailInfo.licenseType != 'A'">
        <a-form-item label="营业执照号" name="licenseNo">
          <a-input v-model:value.trim="applymentDetailInfo.licenseNo" />
        </a-form-item>

        <a-form-item label="营业执照注册地址" name="licRegisAddr">
          <a-input v-model:value.trim="applymentDetailInfo.licRegisAddr" />
        </a-form-item>

        <a-form-item label="证件有效期开始时间" name="licenseEffectBegin">
          <a-input v-model:value.trim="applymentDetailInfo.licenseEffectBegin" />
        </a-form-item>

        <a-form-item label="证件有效期截止" name="licenseEffectEnd">
          <a-input v-model:value.trim="applymentDetailInfo.licenseEffectEnd" :disabled="applymentDetailInfo.licenseEffectEnd == '长期' || applymentDetailInfo.licenseEffectEnd == '无有效期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.licenseEffectEnd == '长期' " @change="(e: any) => applymentDetailInfo.licenseEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
          <a-checkbox :checked="applymentDetailInfo.licenseEffectEnd == '无有效期' " @change="(e: any) => applymentDetailInfo.licenseEffectEnd = e.target.checked ? '无有效期' : '' ">无有效期</a-checkbox>
        </a-form-item>
      </template>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">法定代表人证件</a-divider>

      <a-form-item label="法人身份证人像面照片" name="idcard1Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
      </a-form-item>

      <a-form-item label="法人身份证国徽面照片" name="idcard2Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
      </a-form-item>

      <a-form-item label="法人身份证姓名" name="idcardName">
        <a-input v-model:value.trim="applymentDetailInfo.idcardName" />
      </a-form-item>

      <a-form-item label="法人身份证号" name="idcardNo">
        <a-input v-model:value.trim="applymentDetailInfo.idcardNo" />
      </a-form-item>

      <a-form-item label="法人身份证起始有效期" name="idcardEffectBegin">
        <a-input v-model:value.trim="applymentDetailInfo.idcardEffectBegin" />
      </a-form-item>

      <a-form-item class="jeepay-valid" label="法人身份证结束有效期" name="idcardEffectEnd">
        <a-input v-model:value.trim="applymentDetailInfo.idcardEffectEnd" :disabled="applymentDetailInfo.idcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
        <a-checkbox :checked="applymentDetailInfo.idcardEffectEnd == '长期' " @change="(e: any) => applymentDetailInfo.idcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
      </a-form-item>
    </a-form>

    <!-- 2. 经营信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 2"
      ref="stepForm2Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step2Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">经营信息</a-divider>

      <a-form-item label="选择行业MCC" name="mccCode">
        <JeepayFuiouMccSelect v-model:value="applymentDetailInfo.mccCode" :merchantType="applymentDetailInfo.merchantType" :disabled="isView" />
      </a-form-item>

      <a-form-item label="商户简称" name="mchShortName">
        <a-input v-model:value.trim="applymentDetailInfo.mchShortName" />
        <span class="jeepay-tip-text">建议和商户门头名称保持一致</span>
      </a-form-item>

      <a-form-item label="客服电话" name="servicePhone">
        <a-input v-model:value.trim="applymentDetailInfo.servicePhone" />
        <span class="jeepay-tip-text">客服电话，必须纯数字。推荐 400开头电话或11位有效手机号</span>
      </a-form-item>

      <a-form-item label="商户经营地区县代码" name="areaCode">
        <JeepayAreaSelectFuiou v-model:value="applymentDetailInfo.areaCode" />
      </a-form-item>

      <a-form-item label="商户详细地址" name="address">
        <a-input v-model:value.trim="applymentDetailInfo.address" />
      </a-form-item>

      <a-form-item label="门头照" name="storeOuterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeOuterImg" bizType="applyment" />
      </a-form-item>

      <a-form-item label="店内环境照" name="storeInnerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeInnerImg" bizType="applyment" />
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">联系人信息</a-divider>

      <a-form-item label="商户联系人姓名" name="contactName">
        <a-input v-model:value.trim="applymentDetailInfo.contactName" :readonly="isView" />
      </a-form-item>

      <a-form-item label="商户联系人身份证号" name="contactCertNo">
        <a-input v-model:value.trim="applymentDetailInfo.contactCertNo" :readonly="isView" />
      </a-form-item>

      <a-form-item label="商户联系人电话" name="contactPhone">
        <a-input v-model:value.trim="applymentDetailInfo.contactPhone" :readonly="isView" />
      </a-form-item>

      <a-form-item label="商户联系人邮箱" name="contactEmail">
        <a-input v-model:value.trim="applymentDetailInfo.contactEmail" :readonly="isView" />
      </a-form-item>
    </a-form>

    <!-- 3. 结算账户  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 3"
      ref="stepForm3Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step3Rules"
    >
      <a-form-item label="账户类型" name="settAccountType">
        <a-radio-group v-model:value="applymentDetailInfo.settAccountType" @change="() => emit('itemRender')">
          <a-radio value="C">对私</a-radio>
          <a-radio value="B">对公</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.settAccountType == 'C'" label="结算银行卡照片" name="settAccountLicenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.settAccountLicenseImg" bizType="applyment" ocrType="bankCard" @ocrScan="ocrScanBySettAccountBankCardFunc" />
        <span class="jeepay-tip-text">(上传图片自动银行卡号)</span>
      </a-form-item>

      <a-form-item
        v-if="applymentDetailInfo.settAccountType == 'B' 
          || (applymentDetailInfo.licenseType == '0' || applymentDetailInfo.licenseType == '1')"
        label="开户许可证照片"
        name="companyAccountLicenseImg"
      >
        <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" />
      </a-form-item>

      <a-form-item label="开户名称" name="settAccountName">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName" placeholder="开户名称" />
      </a-form-item>

      <a-form-item label="银行账号" name="settAccountNo">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountNo" placeholder="银行账号" />
      </a-form-item>

      <a-form-item label="开户行" name="settAccountNo">
        <JeepayFuiouBankCodeSelect v-model:value="applymentDetailInfo.settAccountBankName" :disabled="isView" />
      </a-form-item>

      <a-form-item label="联行号" name="interBankNo">
        <a-input v-model:value.trim="applymentDetailInfo.interBankNo" placeholder="联行号" />
        <span><a href="https://www.icvio.cn/" target="_blank">联行号及开户支行名称查询</a></span>
      </a-form-item>

      <a-form-item label="开户支行名称" name="settAccountBankBranchName">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountBankBranchName" placeholder="开户支行名称" />
      </a-form-item>

      <a-form-item label="法人入账标识" name="acntArtifFlag">
        <a-radio-group v-model:value="applymentDetailInfo.acntArtifFlag" :disabled="applymentDetailInfo.licenseType == 'A'">
          <a-radio value="0">非法人入账</a-radio>
          <a-radio value="1">法人入账</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.acntArtifFlag == 0" label="入账账户身份证人像面照片" name="settAccountIdcard1Img">
        <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanBySettAccountFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.acntArtifFlag == 0" label="入账账户身份证国徽面照片" name="settAccountIdcard2Img">
        <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanBySettAccountFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.acntArtifFlag == 0" label="入账非法人证明照片" name="acntArtifImg">
        <JeepayUpload v-model:src="applymentDetailInfo.acntArtifImg" bizType="applyment" />
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.acntArtifFlag == 0" label="入账证件号" name="acntCertifId">
        <a-input v-model:value.trim="applymentDetailInfo.acntCertifId" placeholder="入账证件号" />
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.acntArtifFlag == 0" class="jeepay-valid" label="入账证件到期日" name="acntCertifExpireDt">
        <a-input v-model:value.trim="applymentDetailInfo.acntCertifExpireDt" :disabled="applymentDetailInfo.acntCertifExpireDt == '长期'" style="width: 150px;margin-right: 10px;" />
        <a-checkbox :checked="applymentDetailInfo.acntCertifExpireDt == '长期' " @change="(e: any) => applymentDetailInfo.acntCertifExpireDt = e.target.checked ? '长期' : '' ">长期</a-checkbox>
      </a-form-item>
    </a-form>

    <!-- 4. 费率配置  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 4"
      ref="stepForm4Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step4Rules"
    >
      <a-form-item label="清算类型" name="settleTp">
        <a-radio-group v-model:value="applymentDetailInfo.settleTp">
          <a-radio value="1">自动结算（T1）</a-radio>
          <a-radio value="2">手动结算</a-radio>
          <a-radio value="3">自动结算（D1）</a-radio>
          <a-radio value="4">定时结算</a-radio>
        </a-radio-group>
      </a-form-item>
      
      <a-form-item v-if="applymentDetailInfo.settleTp == 3 || applymentDetailInfo.settleTp == 4" label="清算类型扣率" name="settleTpCd">
        <a-select
          v-model:value="applymentDetailInfo.settleTpCd"
          show-search
          placeholder="选择清算类型扣率"
        >
          <a-select-option v-for="(item) in settleTpCdArr" :key="item.settleTpCd" :value="item.settleTpCd">
            {{ item.rate }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.settleTp == 4" label="清算时间" name="settleTs">
        <a-input v-model:value.trim="applymentDetailInfo.settleTs" placeholder="请输入清算时间" />
        <span class="jeepay-tip-text">清算时间为小时（24小时制），如：上午8点输入：08</span>
      </a-form-item>

      <a-form-item label="是否开通微信" name="wxFlag">
        <a-radio-group v-model:value="applymentDetailInfo.wxFlag">
          <a-radio value="0">不开通</a-radio>
          <a-radio value="1">开通</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="是否开通支付宝" name="aliFlag">
        <a-radio-group v-model:value="applymentDetailInfo.aliFlag">
          <a-radio value="0">不开通</a-radio>
          <a-radio value="1">开通</a-radio>
        </a-radio-group>
      </a-form-item>

      <div
        v-if="applymentDetailInfo.wxFlag == 1 || applymentDetailInfo.aliFlag == 1"
        label="配置费率"
        name="fee"
        style="width:100%; padding-left: 20px;"
      >
        <JeepayPaywayRatePanel
          ref="jeepayPaywayRatePanelRef" 
          :configMode="configMode"
          :infoId=" (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo" 
          :selectIfCode="mchApplymentData.ifCode" 
          onlyRate="true"
        />
      </div>
    </a-form>

    <!-- 5. 补充资料  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 5"
      ref="stepForm5Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step5Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">补充资料</a-divider>

      <a-form-item v-if="applymentDetailInfo.licenseType == '0'" label="组织机构代码证照片" name="organizationImg">
        <JeepayUpload v-model:src="applymentDetailInfo.organizationImg" bizType="applyment" />
        <span class="jeepay-tip-text">非三证合一的旧营业执照入网时必填</span>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.licenseType == '0'" label="税务登记证照片" name="taxRegistrationImg">
        <JeepayUpload v-model:src="applymentDetailInfo.taxRegistrationImg" bizType="applyment" />
        <span class="jeepay-tip-text">非三证合一的旧营业执照入网时必填</span>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.licenseType == 'A'" label="手持证件照片" name="handCertificateImg">
        <JeepayUpload v-model:src="applymentDetailInfo.handCertificateImg" bizType="applyment" />
        <span class="jeepay-tip-text">商户入账人手持本人身份证、入账银行卡站在自己店门口拍摄即可</span>
      </a-form-item>

      <a-form-item label="补充资料照片" name="additionImg">
        <JeepayUpload v-model:src="applymentDetailInfo.additionImg" bizType="applyment" />
      </a-form-item>
    </a-form>

    <a-divider />

    <div class="jeepay-btn-box jeepay-m-btn-box" style="margin-top: 50px; margin-bottom: 50px;text-align: center;">
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep > 1" class="jeepay-m-btn" data-type="inline" type="primary" @click="toPrevStep"><left-circle-outlined /> 上一步 </a-button>
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep < 5" class="jeepay-m-btn" data-type="inline" type="primary" @click="toNextStep">下一步 <right-circle-outlined /> </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import {ref, reactive, getCurrentInstance, defineEmits, inject, watch} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
import settleTpCdArr from './settleTpCd.json'

// 获取当前实例的代理对象
const { proxy } : any = getCurrentInstance()

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// 显示类型枚举值
const showStyleEnum = {
  step: 'step',
  block: 'block'
}

// emit： 向父组件进行通讯。 
const emit = defineEmits(['itemRender'])

// 参数注入： 是否手机端
let isMobile : any = inject('isMobile')

// 响应式数据
const vdata : any = reactive({
  showStyle: 'step', // 显示类型： step-分步,  block-整页显示 
  steps: ['主体信息', '经营信息', '结算账户', '费率配置', '补充资料'],
  isTempData: false, // 是否保存草稿
  isvDefaultPaywayFee: {} as any, // 服务商默认费率
  licenseTypeList: [{ 'value': '0', 'name': '营业执照' }, { 'value': 'A', 'name': '身份证' }],
  wxRate: '', // 微信费率
  currentStep: 1,
  step1Rules: {
                merchantType: [ ruleGenerator.requiredSelect('商户类型', 'number') ],
                licenseType: [ ruleGenerator.requiredSelect('证件类型') ],
                licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
                licenseNo: [ ruleGenerator.requiredInput('证件号码') ],
                licRegisAddr: [ ruleGenerator.requiredInput('营业执照注册地址') ],
                licenseEffectBegin: [ ruleGenerator.requiredInput('证件有效期开始时间') ],
                licenseEffectEnd: [ ruleGenerator.requiredInput('证件有效期截止') ],
                mchFullName: [ ruleGenerator.requiredInput('商户名称全称') ],
                realName: [ ruleGenerator.requiredInput('商户真实名称') ],
                idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面照片') ],
                idcard2Img: [ ruleGenerator.requiredUpload('法人身份证国徽面照片') ],
                idcardName: [ ruleGenerator.requiredInput('法人身份证姓名') ],
                idcardNo: [ ruleGenerator.requiredInput('法人身份证号') ],
                idcardEffectBegin: [ ruleGenerator.requiredInput('法人身份证起始有效期'), ruleGenerator.date ],
                idcardEffectEnd: [ ruleGenerator.requiredInput('法人身份证有效期截止日期'), ruleGenerator.dateOrForever ],
              },
  step2Rules: {
                mccCode: [ ruleGenerator.requiredSelect('行业MCC') ],
                mchShortName: [ ruleGenerator.requiredInput('商户简称') ],
                servicePhone: [ ruleGenerator.requiredInput('客服电话') ],
                areaCode: [ ruleGenerator.requiredSelect('位置编码', 'array') ],
                address: [ ruleGenerator.requiredInput('详细地址') ],
                storeOuterImg: [ ruleGenerator.requiredUpload('门头照') ],
                storeInnerImg: [ ruleGenerator.requiredUpload('店内环境照') ],
                contactName: [ ruleGenerator.requiredInput('商户联系人姓名') ],
                contactCertNo: [ ruleGenerator.requiredInput('商户联系人身份证号') ],
                contactPhone: [ ruleGenerator.requiredInput('商户联系人电话') ],
                contactEmail: [ ruleGenerator.requiredInput('商户联系人邮箱') ],
  },
  step3Rules: {
                settAccountType: [ ruleGenerator.requiredSelect('账户类型') ],
                settAccountLicenseImg: [ ruleGenerator.requiredUpload('结算银行卡照片') ],
                companyAccountLicenseImg: [ ruleGenerator.requiredUpload('开户许可证照片') ],
                settAccountNo: [ ruleGenerator.requiredInput('银行帐号') ],
                settAccountName: [ ruleGenerator.requiredInput('开户名称') ],
                interBankNo: [ ruleGenerator.requiredInput('联行号') ],
                settAccountBankBranchName: [ ruleGenerator.requiredInput('开户支行名称') ],
                acntArtifFlag: [ ruleGenerator.requiredSelect('法人入账标识') ],
                settAccountIdcard1Img: [ ruleGenerator.requiredUpload('入账账户身份证人像面照片') ],
                settAccountIdcard2Img: [ ruleGenerator.requiredUpload('入账账户身份证国徽面照片') ],
                acntArtifImg: [ ruleGenerator.requiredUpload('入账非法人证明照片') ],
                acntCertifId: [ ruleGenerator.requiredInput('入账证件号') ],
                acntCertifExpireDt: [ ruleGenerator.requiredInput('入账证件到期日') ],
  },
  step4Rules: {
                settleTp: [ ruleGenerator.requiredSelect('清算类型') ],
                settleTpCd: [ ruleGenerator.requiredSelect('清算类型扣率') ],
                settleTs: [ ruleGenerator.requiredSelect('清算时间') ],
                wxFlag: [ ruleGenerator.requiredSelect('是否开通微信') ],
                aliFlag: [ ruleGenerator.requiredSelect('是否开通支付宝') ],
  },
  step5Rules: {
                organizationImg: [ ruleGenerator.requiredUpload('组织机构代码证照片') ],
                taxRegistrationImg: [ ruleGenerator.requiredUpload('税务登记证照片') ],
                handCertificateImg: [ ruleGenerator.requiredUpload('手持证件照片') ],
  }
  
})

const jeepayPaywayRatePanelRef = ref()

// 接收进件参数（包含 商户号， ifCode ）
let mchApplymentDataRef : any = inject('mchApplymentData')
let mchApplymentData : any = mchApplymentDataRef.value

// 接收父组件的进件详细参数
let applymentDetailInfoInject : any = inject('applymentDetailInfo')
let applymentDetailInfo : any = applymentDetailInfoInject.value

// 参数注入： 配置方式
let configMode : any = inject('configMode')

// 注入： 是否预览模式
let isView : any = inject('isView')


watch(() => applymentDetailInfo.merchantType, (nv, ov) => {
  if (nv == 1) {
    applymentDetailInfo.licenseType = 'A'
    if (!applymentDetailInfo.mchFullName) {
      applymentDetailInfo.mchFullName = '个体户'
    }
    applymentDetailInfo.settAccountType = 'C'
  }else if (nv == 2) {
    applymentDetailInfo.licenseType = 'B'
  }
})

// settAccountType：C-对私  B-对公0620596091
// acntArtifFlag：0-非法人入账  1-法人入账
watch([() => applymentDetailInfo.licenseType, () => applymentDetailInfo.settAccountType, () => applymentDetailInfo.acntArtifFlag,
            () => applymentDetailInfo.idcardName, () => applymentDetailInfo.idcardNo], (nv, ov) => {

  // 切换证件类型、账户类型、入账标识时，清空信息
  if (nv[0] != ov[0]) { 
    applymentDetailInfo.settAccountName = ''
    applymentDetailInfo.acntCertifId = ''
  }

  // 小微商户
  if (nv[0] == 'A') { 
    applymentDetailInfo.settAccountName = applymentDetailInfo.idcardName
    applymentDetailInfo.acntCertifId = applymentDetailInfo.idcardNo
    applymentDetailInfo.acntCertifExpireDt = applymentDetailInfo.idcardEffectEnd
    applymentDetailInfo.acntArtifFlag = '1' // 法人入账标识 若license_type=A，这此字段必须填：1：法人入账
  }else if (nv[1] == 'C' && nv[2] == 1) {
    applymentDetailInfo.settAccountName = applymentDetailInfo.idcardName
    applymentDetailInfo.acntCertifId = applymentDetailInfo.idcardNo
    applymentDetailInfo.acntCertifExpireDt = applymentDetailInfo.idcardEffectEnd
  } else if (nv[1] == 'B' && nv[2] == 1) {
    applymentDetailInfo.settAccountName = applymentDetailInfo.mchFullName
  }
})


// 初始化
init()
function init() {
  if (!applymentDetailInfo.settleTp) {
    applymentDetailInfo.settleTp = 1
  }

  // 根据商户类型：  确定证件类型选择List
  changeLicenseTypeList()
}

// 下一步
function toNextStep() {
  // 验证是否通过
  proxy.$refs['stepForm'+vdata.currentStep+'Ref'].validate().then( () => {
      vdata.currentStep ++
  })
}

// 上一步
function toPrevStep(){
  vdata.currentStep --
}

function validateAllForm(step: number){
  return proxy.$refs['stepForm'+step+'Ref'].validate().then( () => {
     if(step >= 5){
      return Promise.resolve()
     }
     return validateAllForm(++step)
     
  })
}


// 主体类型选中事件
function changeMerchantType() {
  applymentDetailInfo.mccCode = '' // 行业MCC 置空
  changeLicenseTypeList()
}

// 根据商户类型：  确定证件类型选择List
function changeLicenseTypeList() {
  let licenseTypeList = vdata.licenseTypeList

  if (applymentDetailInfo.merchantType == 1){
    licenseTypeList = [{ 'value': 'A', 'name': '身份证' }]
  }else if (applymentDetailInfo.merchantType == 2){
    licenseTypeList = [{ 'value': 'B', 'name': '营业执照' }]
  }else if (applymentDetailInfo.merchantType == 3){
    licenseTypeList = [{ 'value': '0', 'name': '营业执照' }, { 'value': '1', 'name': '三证合一' }]
  }
  vdata.licenseTypeList = licenseTypeList
}

// 图片识别的回调函数
function ocrScanFunc(orcObject){

  if(orcObject){
    Object.assign(applymentDetailInfo, orcObject)

    // 自动填入 结算卡名称 
    if(orcObject.idcardName && applymentDetailInfo.settAccountType == 'C' && !applymentDetailInfo.settAccountName){
      applymentDetailInfo.settAccountName = orcObject.idcardName
    }

    // 自动营业执照注册地址
    if(orcObject.address && !applymentDetailInfo.licRegisAddr && (applymentDetailInfo.licenseType == '0' || applymentDetailInfo.licenseType == '1' || applymentDetailInfo.licenseType == 'B')){
      applymentDetailInfo.licRegisAddr = orcObject.address
    }
    
  }

}

// 识别银行卡信息 
function ocrScanBySettAccountBankCardFunc(orcObject){
  if(orcObject){
     if(orcObject.settAccountNo){
      applymentDetailInfo.settAccountNo = orcObject.settAccountNo
    }
  }
}

// 图片识别的回调函数
function ocrScanBySettAccountFunc(orcObject){

  if(orcObject){
    
    if(orcObject.idcardName){
      applymentDetailInfo.settAccountIdcardName = orcObject.idcardName
    }
    if(orcObject.idcardNo){
      applymentDetailInfo.settAccountIdcardNo = orcObject.idcardNo
    }

    if(orcObject.idcardEffectBegin){
      applymentDetailInfo.settAccountIdcardEffectBegin = orcObject.idcardEffectBegin
    }

    if(orcObject.idcardEffectEnd){
      applymentDetailInfo.settAccountIdcardEffectEnd = orcObject.idcardEffectEnd
    }
  }

}

// 校验微信或支付宝费率填写是否一致
function checkFeeIsSame(paywayFeeList) {

  let wxFee = ''
  let wxCount = 0
  let aliFee = ''
  let aliCount = 0

  let result = false

  paywayFeeList.forEach(item => {
    if (applymentDetailInfo.wxFlag == 1 && item.wayCode.startsWith('WX_') && item.feeType == 'SINGLE') {
      if (++wxCount > 1 && wxFee != item.feeRate) {
        result = true
      }
      
      wxFee = item.feeRate
    } else if (applymentDetailInfo.aliFlag == 1 && item.wayCode.startsWith('ALI_') && item.feeType == 'SINGLE') {
      if (++aliCount > 1 && aliFee != item.feeRate) {
        result = true
      }
      
      aliFee = item.feeRate
    }
  })

  return result
}


// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp){

  // 判断下： 是否包含该组件， 若没有该组件（比如分账模式下）， 则无需获取此费率数据
  if(jeepayPaywayRatePanelRef.value){

    // 放置费率配置项
    let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
      if(typeof(paywayFeeList) != 'object'){
        return Promise.reject()
      }

      // 校验费率一致性
      if (checkFeeIsSame(paywayFeeList)) {
        $infoBox.message.error('费率不一致')
        return Promise.reject()
      }

      // 赋值到对象中
      applymentDetailInfo.reqPaywayFeeList = paywayFeeList

  }

  // 保存草稿只校验当前步骤数据
  if (isTemp) {
    return Promise.resolve()
  }

  // 验证所有表单
  return validateAllForm(1).then(() => {
    return Promise.resolve()
  }).catch((params: any) => {
    $infoBox.message.error('数据填写不完整， 请检查后提交')
    return Promise.reject()
  })
}

defineExpose({ saveDataPreCallback })

</script>

<style lang="less" scoped>
.jeepay-tip-text{
  font-size: 10px; color: rebeccapurple
}
.option-left {
  width: 50%;
  word-wrap: break-word; 
  white-space: normal;
  word-break: break-all;
}
.option-right {
  color: rgb(153, 153, 153);
}
.option-bottom {
  word-wrap: break-word; 
  white-space: normal;
  word-break: break-all;
  color: rgb(153, 153, 153);
}
.jeepay-btn-box {
  margin: 15px -12px !important;
}
.jeepay-btn-box .ant-btn {
  margin: 0 10px;
}
</style>